<template>
    <section>
      <div class="content">
        <span class="left">
          有3个红包即将到期
        </span>
        <router-link class="right" :to="{name:'redExplain'}">
          <i class="iconfont1">&#xe63f;</i>
          <span>红包说明</span>
        </router-link>
        <div class="HB" v-for="item in project1">
          <div class="con">
            <div class="JC"></div>
            <div class="left1 col-xs-4">
              <i class="iconfont3">&#xe605;</i>
              <span class="s1">{{item.amount}}</span>
              <p class="p1">{{item.description_map.sum_condition}}</p>
            </div>
            <div class="right1 col-xs-8"></div>
            <span class="s5">{{item.description_map.validity_delta}}</span>
             <p class="p2">{{item.name}}</p>
            <p class="p3">{{item.description_map.validity_periods}}</p>
            <p class="p4">{{item.description_map.phone}}</p>

        </div>

        </div>
        <div class="foot">
          限品类：快餐便当，特色菜系，小吃夜宵，甜品饮品，异国料理
        </div>
        <p  class="rou1">
          <router-link :to="{name:'HistoricalRed'}" >历史红包
            <i class="iconfont1">&#xe643;</i>
          </router-link>
        </p>

      </div>
      <router-link :to="{name:'DH_Red'}" class="col-xs-6 col">兑换红包</router-link>
      <router-link :to="{name:'Recommend'}" class="col-xs-6 col col3">推荐有奖</router-link>
    </section>
</template>

<script>
  import Vue from 'vue'
    export default {
        name: "One",
      data(){
          return {
            project:{},
            project1:[]
          }
      },
      created(){
          //获取用户信息
        if (localStorage.getItem('personObj')!==null){
            this.project=JSON.parse(localStorage.getItem('personObj'))
           console.log(this.project)
        }
        //发起请求获取可用红包
        Vue.axios.get('https://elm.cangdu.org/promotion/v2/users/'+this.project.user_id+'/hongbaos?limit=3&offset=0').then((e,q)=>{
            console.log(e)
          this.project1=e.data
        })
      }

    }
</script>

<style scoped>
  .iconfont1{
    font-family:"iconfont" !important;
    font-size:0.17rem;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    color: dodgerblue;
  }
  .col{
    text-align: center;
    height: 0.6rem;
    line-height: 0.6rem;
    background-color: #F5F5F5;
    color: black;
    font-size: 0.2rem;
    border-bottom: 0.005rem solid lightgray;
  }
  .col3{
    border-left:0.005rem solid lightgray ;
  }
  .content{
    width: 100%;
    height: 92%;
    background-color: lightgray;
  }
  .left{
    margin-left: 0.1rem;
  }
  .right{
    float: right;
  }
  .right span{
    margin-left: 0.1rem;
    margin-right: 0.1rem;
  }
  .foot{
    font-size: 0.1rem;
    margin-left: 0.1rem;
  }
  .iconfont2{
    font-family:"iconfont" !important;
    font-size:0.4rem;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.25px;
    -moz-osx-font-smoothing: grayscale;
    color: red;
  }
  .iconfont3{
    font-family:"iconfont" !important;
    font-size:0.25rem;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.25px;
    -moz-osx-font-smoothing: grayscale;
    color: red;
  }
  .HB{
    width: 100%;
    height: 1.4rem;
    text-align: center;
    margin-top: 0.1rem;
  }
  .icon{
    margin-left: 0.6rem;
  }
  .s1{
    color: red;
    font-size: 0.45rem;
  }
  .p1{
    font-size: 0.1rem;
    color: gray;
  }
  .left1{
    border-right:0.005rem solid gray;
  }
.s5{
   font-size: 0.2rem;
  color: red;
  float: right;
}
  .p2{
  font-size: 0.23rem;
    margin-right: 1.1rem;
  }
  .p3{
    font-size: 0.11rem;
    color: gray;
    margin-right: 1.12rem;
  }
  .p4{
    font-size: 0.11rem;
    color: gray;
    margin-left: 0.3rem;
    margin-right: 0.4rem;
  }
  .rou1{
    text-align: center;
  }
  .con{
    background-color: white;
    height: 0.99rem;
  }
  .JC{
    width: 100%;
    background-color: red;
    height: 0.07rem;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
  }
</style>
